{extend name="base" /}
{block name="resources"}
<!-- 编辑商品时，用到的JS、CSS资源 -->
{include file="goods/controlEditGoodsCommonResources"}
<style>
    input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
        background-color: #fff;
        cursor: pointer;
    }
    .required {display: inline;}
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
</style>
{/block}
{block name="main"}
<link rel="stylesheet" type="text/css" href="/public/css/mdui.css">
<script src="/public/js/mdui.js"></script>
<button class="mdui-btn app-btn" mdui-drawer="{target: '#left-drawer'}" style="position: fixed;top:10rem;right:1.5rem;z-index: 999999999;padding:5px 10px;">查看手机端效果</button>
<input type="hidden" id="mod_class_id" value="{$user_info.mod_class_id}">
<article class="cl pd-20"  id="get_all">
<div class="mdui-drawer mdui-drawer-right mdui-drawer-close" id="left-drawer">
    <div class="leftPhonewrap" id="leftPhonewrap">
        <div class="holderPhone" style="position: fixed;right: 2rem;top: 8rem;z-index: 999999999999;">
            <div class="wxHd">
                <div id="actName" class="phoneTitle" style="bottom: 15px;width: 100%;left: 0;padding: 0 65px;">
                    <h2>商品详情</h2>
                </div>
            </div>
            <div id="anythingContent" style="background: #fff;overflow:scroll">
                <div class="wrap">
                    <div class="slide_pic" style="height: 250px;">
                        <div class="swiper-container">
                            <div class="swiper-wrapper" >
                                <div class="swiper-slide" v-for="item in goods_img">
                                    <img :src="item.url">
                                </div>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="goods_info">
                        <div class="goods_price">￥<span>{{goods_price}}</span></div>
                        <div class="goods_count">销量：{{goods_xiao}}</div>
                        <div class="goods_tit">{{ goods_name }}</div>
                        <div class="goods_d">{{ goods_cuxiao }}</div>
                    </div>
                    <div class="goods_type li_arrow"><span class="type_info">规格</span>
                        <div class="type_choice">
                            <ul>
                                <li style="list-style: none;float: left" v-for="item in goods_sku">{{item.name}}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="switch_box">图文详情</div>
                    <div class="goods_intro" v-html="goods_desc">
                    </div>
                </div>
            </div>
        </div>
    </div>
     </div>
    <div id="tab_demo" class="HuiTab" style="margin-bottom: 15px;">
        <div class="tabBar clearfix">
            <span onclick="window.location.href='{:url('goods/goodslist')}'">商品列表</span>
            <span class="current" onclick="window.location.href='{:url('goods/add_goods')}'">添加商品</span>
            <div class="l n_tab_add" style="width: auto;">
                <button type="button" class="btn btn-search radius"
                        onclick="gather('淘宝商品一键采集','__CONF_SITE__admin/goods/goods_collect','650px','300px')">
                    淘宝商品一键采集
                </button>
            </div>
        </div>
    </div>
<div class="ncsc-form-goods" style="margin-top:15px;" id="newvue">
    <h3 class="js-goods-info">商品信息</h3>
    <dl style="display: none">
        <dt>条形码添加商品：</dt>
        <dd>
            <input type="text" class="category-text" placeholder="请输入商品条码" id="code_name">
            <button class="category-button" onclick="select_code_name()">查询</button>
        </dd>
    </dl>
    <dl>
        <dt><i class="required">*</i>商品名称：</dt>
        <dd>
            <input class="productname" style="height: 30px; line-height: 30px;" v-model="goods_name" type="text" id="txtProductTitle" placeholder="请输入商品名称，不能超过60个字"
                   oninput='if(value.length>60){value=value.slice(0,60);$(this).next().text("商品名称不能超过60个字符").show();}'/>
            <span class="help-inline">请填写商品名称</span>
        </dd>
    </dl>
    <dl>
        <input type="hidden" value="1" id="goods_lib">
        <dt><i class="required">*</i>商品分类：</dt>
        <dd id="Category" data-flag="category" data-goods-id="0" cid="" data-attr-id="" cname="">
            <span class="category-text" id="cate_name">{$this_mch_good_cate.cate_name}</span>
            <input type="hidden" value="{$this_mch_good_cate.cate_id}" id="cate_id">
            <input type="hidden" value="{$this_mch_good_cate.cate_id}" id="cate_id_v1">
            <button class="category-button" onclick="goods_cate('分类选择','__CONF_SITE__admin/goods/goods_cate','500','550')">选择</button>
            <span><label for="g_name" class="error"><i class="icon-exclamation-sign"></i>商品分类不能为空</label></span>
            <span class="help-inline">请选择商品分类</span>
        </dd>
    </dl>
    <dl>
        <dt>商品促销语：</dt>
        <dd>
            <input class="productname" style="height: 30px; line-height: 30px;" v-model="goods_cuxiao" type="text" id="txtIntroduction" placeholder="请输入促销语，不能超过60个字符"
                   oninput='if(value.length>60){value=value.slice(0,60);$(this).next().text("促销语不能超过60个字符").show();}'/>
            <span class="help-inline">商品促销语输入不正确</span>
        </dd>
    </dl>
    <dl style="display: none">
        <dt>关键词：</dt>
        <dd>
            <input class="productname" type="text" id="txtKeyWords" placeholder="商品关键词用于SEO搜索"
                   oninput='if(value.length>40){value=value.slice(0,40);$(this).next().text("商品关键词不能超过40个字符").show();}'/>
            <span class="help-inline">请输入商品促销语，不能超过40个字符</span>
        </dd>
    </dl>

    <dl>
        <dt><i class="required">*</i>销售价：</dt>
        <dd>
            <input style="" class="goods_price" v-model="goods_price" type="number" id="txtProductSalePrice" min="0" placeholder="0"/><em
                class="add-on">元</em>
            <span class="help-inline">商品现价不能为空且需是数字</span>
        </dd>
    </dl>
    <dl >
        <dt>原价：</dt>
        <dd>
            <input class="goods_price" style="height: 30px; line-height: 30px;" type="number" id="txtProductMarketPrice" min="0" placeholder="0"/><em
                class="add-on">元</em>
            <span class="help-inline">商品原价不能为空且需是数字</span>
        </dd>
    </dl>
    <dl style="display: none">
        <dt>成本价：</dt>
        <dd>
            <input style="height: 30px; line-height: 30px;" class="goods_price" type="number" id="txtProductCostPrice" min="0" placeholder="0"/><em
                class="add-on">元</em>
            <span class="help-inline">商品成本不能为空且需是数字</span>
        </dd>
    </dl>
    <dl>
        <dt>基础销量：</dt>
        <dd>
            <input style="width: 144px;" type="number" v-model="goods_xiao" class="span1" id="BasicSales" placeholder="0"/>
            <span class="help-inline">基础销量需是数字</span>
        </dd>
    </dl>
    <dl  style="display: none">
        <dt>基础点击数：</dt>
        <dd>
            <input type="number" class="span1" id="BasicPraise" placeholder="0"/>
            <span class="help-inline">基础点击数需是数字</span>
        </dd>
    </dl>
    <dl {if condition="$user_info.mod_class_id==5"} style="display: none" {/if}>
        <dt><i class="required">*</i>总库存：</dt>
        <dd>
            <input type="number" style="width: 144px;" class="goods-stock" id="txtProductCount" min="0" value="{if condition="$user_info.mod_class_id==5"}999999{/if}"/>
            <span class="help-inline">请输入总库存数量，必须是大于0的整数</span>
        </dd>
    </dl>
    <h3 class="js-goods-type">规格分组</h3>
    <dl {if condition="$user_info.mod_class_id==5"} style="display: none" {/if} >
        <dt>规格属性分组：</dt>
        <dd>
            <select id="goodsType">
                <option value="0">请选择规格属性分组</option>
                {foreach name="goods_attribute_list" item="attribute"}
                {if condition="$goods_attr_id == $attribute.attr_id"}
                <option value="{$attribute.attr_id}" selected="selected">{$attribute.attr_name}</option>
                {else/}
                <option value="{$attribute.attr_id}">{$attribute.attr_name}</option>
                {/if}
                {/foreach}
            </select>
            <span class="help-inline">请选择规格属性分组</span>
        </dd>
    </dl>
    <dl>
        <dt><span class="color-red"></span></dt>
        <dd>
            <table class="goods-sku js-goods-sku">
                <tbody>
                <tr>
                    <td colspan="2">
                        <div style="text-align:left;">
                            <h5 style="margin:0;padding:0;font-weight: normal;color: #FF8400;">操作提示</h5>
                            <p style="color:#FF8400;font-size:12px;">点击规格值进行操作。</p>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </dd>
    </dl>
    <dl class="control-group js-spec-table" name="skuTable" style="display: none;height: auto">
        <dt><span class="color-red"></span>商品库存：</dt>
        <dd>
            <div class="controls">
                <div class="js-goods-stock control-group" style="height:auto;font-size: 14px; margin-top: 10px;">
                    <div id="stock-region" class="sku-group">
                        <table class="table-sku-stock">
                            <thead></thead>
                            <tbody></tbody>
                            <tfoot></tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </dd>
    </dl>
    <dl class="js-goods-attribute-block" style="display:none;">
        <dt><span class="color-red"></span>商品属性：</dt>
        <dd>
            <div class="controls">
                <table class="goods-sku-attribute js-goods-sku-attribute" style="margin:0;"></table>
            </div>
        </dd>
    </dl>
    <h3 class="js-goods-img">商品图片</h3>
    <dl>
        <dt><i class="required">*</i>商品图片：</dt>
        <dd>
            <div id="goods_picture_box" class="controls" style="background-color:#FFF;border: 1px solid #E9E9E9;">
                <div class="ncsc-goods-default-pic">
                    <div class="goodspic-uplaod" style="padding: 15px;">
                        <div class='img-box' style="min-height:160px;">
                            <div class="upload-thumb" id="default_uploadimg">
                                <img src="/public/goods/img/default_goods_image_240.gif">
                            </div>
                        </div>
                        <div class="clear"></div>
                        <span class="img-error">最少需要一张图片作为商品主图</span>
                        <p class="hint">上传商品图片，<font color="red">第一张图片将作为商品主图</font>,支持同时上传多张图片,多张图片之间可随意调整位置；支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸800x800像素以上、大小不超过1M的正方形图片，上传后的图片将会自动保存在图片空间的默认分类中。
                        </p>
                        <div class="handle">
                            <div class="btn radius" style="background: #cccbcb;color:black;">
                                <a id="img_box" nctype="show_image" href="javascript:void(0);">从图片空间选择</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <span class="help-inline">最少需要一张图片作为商品主图</span>
        </dd>
    </dl>
    <dl {if condition="$user_info.mod_class_id==5"} style="display: none" {/if}>
        <dt><i class="required"></i>规格图片：</dt>
        <dd>
            <div class="sku-picture-div" style="float: left">
            </div>
            <div style="float: left;color: #24b1e7;font-size: 12px;">友情提示：规格图片只能选择一种规格属性上传图片，否则会覆盖</div>
            <div class="clear"></div>
            <div class="sku-picture-box">
            </div>
        </dd>
    </dl>
    <h3 class="js-goods_detail">商品详情</h3>
    <dl>
        <dt><i class="required">*</i>商品描述：</dt>
        <dd>
            <div class="controls" id="discripContainer">
                <textarea id="tareaProductDiscrip" name="discripArea" style="height: 500px; width: 800px;display: none"></textarea>
                <div id="editor" type="text/plain" style="width: 100%; height: 500px;"></div>
                <span class="help-inline">请填写商品描述</span>
            </div>
        </dd>
    </dl>
            <dl {if condition="$user_info.mod_class_id==5"} style="display: none" {/if}>
        <dt><i class="required"> * </i>运费：</dt>
        <dd>
            <div class="controls">
                <label class="inline normal"><input type="radio" name="fare" value="0"
                                                          checked="checked"/>免邮</label>
                <label class="inline normal"><input type="radio" name="fare" value="1"/> 买家承担运费</label>
                <span class="help-inline">请选择运费类型</span>
            </div>
        </dd>
    </dl>
    <!--<dl id="valuation-method" style="display: none">-->
        <!--<dt><i class="required">*</i>计价方式：</dt>-->
        <!--<dd>-->
            <!--<label class="inline normal"><input type="radio" name="shipping_fee_type" value="3"-->
                                                      <!--checked="checked"/>计件</label>-->
        <!--</dd>-->
    <!--</dl>-->

    <dl id="express_Company" style="display: none;">
        <dt>运费模板：</dt>
        <dd>
            <select id="expressCompany">
                {if $expressCompany_num==0}
                <option value="0">请选择运费模板</option>
                {/if}
                {foreach name="expressCompany" item="vo"}
                <option value="{$vo.id}">{$vo.name} ({$vo.type_fee==1?'计件':'计重'})</option>
                {/foreach}
            </select>
        </dd>
    </dl>
    <dl {if condition="$user_info.mod_class_id==5"} style="display: none" {/if}>
        <dt><i class="required">*</i>库存显示：</dt>
        <dd>
            <div class="controls">
                <label class="inline normal"><input type="radio" name="stock" checked="checked" value="1"/>
                    是</label>
                <label class="inline normal"><input type="radio" name="stock" value="0"/> 否</label>
                <span class="help-inline">请选择库存是否显示</span>
            </div>
        </dd>
    </dl>
    <h3 class="js-goods-other">其他信息</h3>
    <div class="js-mask-category"
         style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 90; display: none; background: rgba(0, 0, 0, 0);"></div>
    <dl>
    <dt><i class="required"></i>重量(g)：</dt>
    <dd>
        <div class="controls">
            <input type="number" class="input-mini" min="0" value="0" id="weight" style="width: 200px;"/>
            <span class="help-inline" style="display: block;">若运费模板是计重方式，请填写重量</span>
        </div>
    </dd>
    </dl>
    <dl {if condition="$user_info.mod_class_id==5"} style="display: none" {/if}>
        <dt><i class="required">*</i>最少购买数：</dt>
        <dd>
            <div class="controls">
                    <input type="number" class="input-mini" min="1" value="1" id="minBuy"/>
                <span class="help-inline">件</span>
                <span class="help-inline">最少购买数必须是大于0的整数</span>
            </div>
        </dd>
    </dl>
    <dl>
        <dt><i class="required">*</i>是否上架：</dt>
        <dd>
            <div class="controls">
                <label class="inline normal"><input type="radio" name="shelves" value="1" checked="checked"/> 立刻上架</label>
                <label class="inline normal"><input type="radio" name="shelves" value="0"/> 放入仓库</label>
            </div>
        </dd>
    </dl>
</div>
<div class="btn-submit">
    <button class="btn-common" id="btnSave" type="button" onClick="SubmitProductInfo(0,'ADMIN_MAIN','SHOP_MAIN')">确认提交
    </button>
</div>
</article>
{include file="goods/fileAlbumImg" /}
{include file="goods/controlEditGoodsCommonScript" /}
<script>
    var ue =UM.getEditor('editor',{
        imageUrl:"__CONF_SITE__app/Umupload/uploadFile", //处理图片上传的接口
        imageFieldName:"upfile", //上传图片的表单的name
        imagePath: ""
    });
    function goods_cate(title, url, w, h) {
        layer_show(title, url, w, h);
    }
    function select_lib_goods(){
        layer.open({
            type: 2,
            area: ['800px', '600px'],
            fix: false, //不固定
            maxmin: true,
            shade:0.4,
            title: '商品库商品',
            content: '__CONF_SITE__admin/goods/select_lib_goods',
            scrollbar:false
        });
    }
    function get_lib_goods(id) {
        window.location.href="__CONF_SITE__goods/add_goods?goodsId="+id+"&this_lib=1";
    }
    ue.addListener("blur",function() {
        var arr = (UM.getEditor('editor').getContent());
        app.goods_desc=arr;
    })
    function select_code_name() {
        var code=$("#code_name").val();
        $.ajax({
            type : "post",
            url : "{:url('goods/select_code')}",
            data : {
                'code':code,
            },
            success : function(data) {
                if(data['code']==0){
                    layer.msg('导入成功',{icon:1,time:1000});
                    $("#txtProductTitle").val(data['info']['名称']);
                    $("#txtKeyWords").val(data['info']['商标']);
                    var ue = UE.getEditor('editor');
                    ue.setContent(data['info']['描述']);
                    var xh=data['info']['规格型号'];
                    $.ajax({
                        type : "post",
                        url : "{:url('goods/goods_spec_add')}",
                        data : {
                            'is_visible' : '1',
                            'spec_name' : '规格',
                        },
                        success : function(data) {
                            //console.log(data);
                            if (data.code > 0) {
                                addGoodsSpecCallBack(data.code,'规格');
                                $.ajax({
                                    url : "/admin/goods/addGoodsSpecValue",
                                    type : "post",
                                    data : { "spec_id" : data.code, "spec_value_name" : xh},
                                    success : function(res){
                                        console.log(data);
                                        if(res.code>0){
                                            layer.msg(res.message, {icon: 1, time: 1000});
                                            $("span[data-spec-value-id='-1']").attr("data-spec-value-id",res.code);
                                            var curr_obj = $(".js-goods-spec-value-add").parent();
                                            var spec_value = {
                                                spec_name : '规格',//规格名称
                                                spec_value_name : xh, //规格值
                                            };
                                            curr_obj.parent().append(getCurrentSpecValueHTML(spec_value));//加载当前添加的规格值、以及最后那个添加按钮
                                            curr_obj.remove();//删除当前的添加按钮
                                        }else{
                                            layer.msg(res.message, {icon: 5, time: 1000});
                                        }
                                    }
                                });
                            } else {
                                flag = false;
                            }
                        }
                    });
                }else {
                    layer.msg(data['msg'],{icon:2,time:1000});
                }
            }
        });
    }
    function gather(title, url, w, h) {
        layer.open({
            type: 2,
            area: [w, h],
            fix: false, //不固定
            maxmin: true,
            shade: 0.4,
            title: title,
            content: url,
            scrollbar: false
        });
    }
    function pickrsve(url) {
        $.ajax({
            type: "post",
            url: "{:url('admin/goods/goods_collect')}",
            data: {
                url: url
            },
            success: function (data) {
                $("#goods_picture_box .img-error").hide();
                $("#goods_picture_box #default_uploadimg").remove();
                $(data['html']).appendTo('#goods_picture_box .img-box');
                $('#goods_picture_box .draggable-element').arrangeable();
                app.goods_name=data['title'];
                app.goods_price=data['price'];
                app.goods_xiao=data['base_num'];
                ue.setContent(data['content']);
            }
        });
    }
</script>
{/block}